/*
包裹统计2
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header/>
    <!-- 列表区 -->
    <el-card  style="flex: 1;overflow:auto">
      <div class="app-page">
        <div class="content-flex">
          <el-form ref="search" :model="search" inline size="small">
            <el-form-item label="历史状态日期" prop="date">
              <el-date-picker
                v-model="search.date"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="packageStatus">
              <el-cascader
                placeholder="包裹状态"
                v-model="search.packageStatus"
                :show-all-levels="false"
                filterable
                :props="{
                    checkStrictly: true,
                    value:'name',
                    children: 'childrenInfo',
                    label: 'name'}"
                :options="searchOptions.packageStatus"
                collapse-tags
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="statisticsType">
              <el-select
                v-model="search.statisticsType"
                placeholder="时间轴单位"
                style="width: 120px"
              >
                <el-option
                  v-for="item in searchOptions.statisticsType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select
                filterable
                style="width: 120px"
                v-model="search.storeName"
                clearable
                placeholder="全部门店"
              >
                <el-option
                  v-for="item in stores"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select
                filterable
                style="width: 120px"
                v-model="search.deliverName"
                clearable
                placeholder="全部渠道"
              >
                <el-option
                  v-for="item in searchOptions.deliverName"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="customerNum" label="">
              <el-input v-model="search.customerNum" placeholder="客户号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="query_batchId">
              <el-button type="primary" round @click="getStoreAmount" style="background: #64b0f2">统计</el-button>
              <el-button
                type="warning"
                round
                @click="$refs.search.resetFields()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1;overflow: auto">
          <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
            <el-tab-pane label="信息总览" name="1">
              <div class="app-page">
                <el-table
                  show-summary
                  :summary-method="getSummaries"
                  :data="statisticsData.overAllInfo && statisticsData.overAllStoreTotalInfo"
                  style="width: 100%">
                  <el-table-column label="店面">
                    <template slot-scope="scope">
                      {{scope.row.storeName}}({{stores.filter(store => store.name == scope.row.storeName)[0].code}})
                    </template>
                  </el-table-column>
                  <el-table-column label="总运费" prop="totalFreight">
                    <template slot-scope="scope">
                      CA${{scope.row.totalFreight}}
                    </template>
                  </el-table-column>
                  <el-table-column label="实际重量" prop="totalRealWeight"></el-table-column>
                </el-table>
                <div style="flex:1;overflow:auto">
                  <div class="statistic-box">
                    <div class="box" v-for="(item,index) in statisticsData.overAllInfo" :style="{'margin-left':index%2===0?'0':'2%'}">
                      <el-card shadow="hover">
                        <div slot="header" style="text-align: center">
                          <el-link type="primary"> <i class="el-icon-s-home"></i></el-link>
                          {{item.storeInfo.name}}({{item.storeInfo.code}})
                        </div>
                        <el-table
                          :data="item.goodsCostInfos"
                          height="100%"
                          style="width: 100%">
                          <el-table-column label="商品资费类型" prop="goodsCostInfoName"/>
                          <el-table-column label="总实际重量" prop="totalRealWeight"/>
                          <el-table-column label="单位成本" prop="unitCost"/>
                          <el-table-column label="总成本" prop="totalCost">
                            <template slot-scope="scope">
                              ${{scope.row.totalCost}}
                            </template>
                          </el-table-column>
                          <el-table-column label="总运费" prop="totalFreight">
                            <template slot-scope="scope">
                              ${{scope.row.totalFreight}}
                            </template>
                          </el-table-column>
                          <el-table-column label="净利润" prop="netProfit">
                            <template slot-scope="scope">
                              ${{scope.row.netProfit}}
                            </template>
                          </el-table-column>

                        </el-table>
                      </el-card>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'运单总数'+totalCount+'个'" name="2">
              <my-line ref="line1" tips="运单数量：" y-type="个"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'收费总金额'+totalAmount+'加元'" name="3">
              <my-line ref="line2" tips="收费金额：$" y-type="加元"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'总实际重量'+totalWeight+'磅'" name="4">
              <my-line ref="line3" tips="实际重量：" y-type="磅"></my-line>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dateFormat } from "@/utils";
import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from 'vuex'
import {getPackage} from '@/api/statistics/parcel'

import myLine from '../components/myLine'
import {
  getPackageInfo,
} from "@/api/baseconfig/wordpoint"
import {
  getChannelMap,
} from "@/api/intermodals/channel";
let search = {
  date:[dateFormat('YYYY-mm-dd',new Date()),dateFormat('YYYY-mm-dd',new Date())],
  statisticsType:'DAY',
  storeName:'',
  customerNum:'',
  packageStatus:'',
  deliverName: '',
}
export default {
  name: 'parcel',
  components:{
    myHeader,
    myLine
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  data(){
    return {
      search:this.cloneObj(search),
      activeName:'1',
      searchOptions:{
        statisticsType:[
          {
            label:'日统计',
            value:'DAY'
          },{
            label:'月统计',
            value:'MONTH'
          },{
            label:'年统计',
            value:'YEAR'
          },
        ],
        packageStatus:[],
        deliverName:[]
      },
      statisticsData:{},
      totalCount:0,
      totalAmount:0,
      totalWeight:0,
    }
  },
  created() {
    this.getStoreAmount()
    //获取包裹状态
    getPackageInfo({pageNum: 1, pageSize: 100,}).then(resp=>{
      this.delChildren(resp.data.records)
      this.searchOptions.packageStatus = resp.data.records
    })
    //获取发货渠道
    getChannelMap().then((resp) => {
      this.searchOptions.deliverName =  resp.data
    });
  },
  methods:{
    delChildren(arr) {
      arr.forEach(item=>{
        if(item.childrenInfo.length === 0 ){
          delete item.childrenInfo
        }else{
          this.delChildren(item.childrenInfo)
        }
      })
    },
    getStoreAmount(){
      this.totalCount = 0
      this.totalAmount = 0
      this.totalWeight = 0
      let query = {
        ...this.handleDate(this.search.date),
        statisticsType:this.search.statisticsType,
        customerNum:this.search.customerNum,
        storeName: this.search.storeName,
        deliverName:this.search.deliverName,
        packageStatus:Array.isArray(this.search.packageStatus)?this.search.packageStatus[this.search.packageStatus.length-1]:this.search.packageStatus,
      }
      this.activeName = '1'
      getPackage(query).then(resp=>{
        this.statisticsData = resp.data
        this.statisticsData.countDateInfos.forEach(item=>{
          this.totalCount+=item.count
        })
        this.statisticsData.amountDateInfos.forEach(item=>{
          this.totalAmount+=item.amount
        })
        this.statisticsData.weightDateInfos.forEach(item=>{
          this.totalWeight+=item.amount
        })
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if(index === 1){
            sums[index] = 'CA$'+sums[index];
          }
          console.log(sums[index])
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },
    handleTabClick(tab){
      if(tab.name == 2){
        this.$nextTick(()=>{
          let xData = this.statisticsData.countDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.countDateInfos.map(item=>item.count)
          this.$refs.line1.init(xData,yData)
        })
      }
      if(tab.name == 3){
        this.$nextTick(()=>{
          let xData = this.statisticsData.amountDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.amountDateInfos.map(item=>item.amount)
          this.$refs.line2.init(xData,yData)
        })
      }
      if(tab.name == 4){
        this.$nextTick(()=>{
          let xData = this.statisticsData.weightDateInfos.map(item=>item.dateString)
          let yData = this.statisticsData.weightDateInfos.map(item=>item.amount)
          this.$refs.line3.init(xData,yData)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-tabs{
  height: 100%;
}
/deep/ .el-tabs--border-card{
  box-shadow: unset;
}
/deep/ .el-tabs__content{
  height: calc(100% - 50px);
  &>div{
    height: 100%;
  }
}

.statistic-box{
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .box{
    width: 49%;
    height: 400px;
  }
  /deep/.el-card__body{
    height:calc(100% - 50px)
  }
}
</style>
